<template>
  <div class="capacity-statistical-container">
    <ScreenConditions :isDataType="false">
      <template slot="conditions">
        <!-- <a-button
          :type="queryDimension == 0 ? 'primary' : ''"
          @click="checkDataType(0)"
        >
          按标段
        </a-button> -->
        <!-- <a-button
          :type="queryDimension == 1 ? 'primary' : ''"
          @click="checkDataType(1)"
        >
          按拌和站
        </a-button> -->
        <AssociativeSelectGroup
          :map="computedSelectMap"
          v-model="defaultTime"
          :activeDate="activeDate"
          @conditionChange="selectGroupChange($event)"
        >
          <template slot="space_4">
            <a-radio-group :value="dateType" @change="changeTimeScope($event)">
              <a-radio-button value="1"> 小时 </a-radio-button>
              <a-radio-button value="4"> 天 </a-radio-button>
              <a-radio-button value="3"> 周 </a-radio-button>
              <a-radio-button value="2"> 月 </a-radio-button>
            </a-radio-group>
          </template>
        </AssociativeSelectGroup>
      </template>
      <template slot="operate">
        <a-button type="primary" @click="getChartData()"> 查询 </a-button>
      </template>
    </ScreenConditions>
    <div class="card-view-container" v-loading="loading">
      <div class="chart-header">
        {{ chartHeader ? chartHeader.split("@$@")[0] : "未知"
        }}<span>{{ chartHeader ? chartHeader.split("@$@")[1] : "" }}</span>
      </div>
      <div class="date-time">{{ dataTime }}</div>
      <div class="chart-body">
        <ChartView :options="echartOptions" @rendered="rendered()"></ChartView>
      </div>
    </div>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/cement-app/AssociativeSelectGroup";
import ChartView from "@/components/ChartView";
import themeStyles from "@/theme/compileFiles/cssVaribles.less";
import {
  getHasDataDate,
  getCapacityStatisticsSec,
  getCapacityStatisticsEqu,
} from "@/api/wisdom-beam/productionManage-app";
export default {
  components: {
    AssociativeSelectGroup,
    ChartView,
  },
  data() {
    return {
      loading: true,
      //数据类型 0按标段  1按拌和站
      queryDimension: 1,
      //拌和站id
      equCodes: [],
      //结构类型
      ratioName: "",
      //日期格式
      dateFormat: "YYYY-MM-DD HH:mm:ss",
      defaultTime: [],
      //时间范围
      dateType: "4",
      //
      echartOptions: {},
      //颜色数组
      chartsColors: [
        themeStyles["--echart-blue"],
        themeStyles["--echart-yellow"],
        themeStyles["--echart-purple"],
        themeStyles["--echart-pale-red"],
        themeStyles["--echart-orange"],
        themeStyles["--echart-green"],
        themeStyles["--echart-light-blue"],
        themeStyles["--echart-pink"],
      ],
      chartHeader: "未知",
      //
      dataTime: "",
      selectMap: [
        //标段
        {
          type: "block",
          mode: "tags",
          placeholder: "请选择标段",
          isDefault: true,
          allowClear: false,
        },
        //拌和站
        {
          type: "mixin",
          mode: "tags",
          placeholder: "请选择拌和站",
          isDefault: true,
          allowClear: false,
        },
        //工程名称
        {
          type: "engineerName",
          mode: "default",
          placeholder: "请选择工程名称",
        },
        //强度等级
        {
          type: "strength",
          mode: "default",
          placeholder: "请选择强度等级",
        },
        //浇筑部位
        {
          type: "placePart",
          mode: "default",
          placeholder: "请选择浇筑部位",
        },
        {
          type: "calendar",
        },
      ],
      conditionsData: {},
      activeDate: [],
    };
  },
  computed: {
    computedSelectMap() {
      let { queryDimension, selectMap } = this;
      return selectMap.filter(
        (v) => v.type != (queryDimension == 0 ? "mixin" : "block")
      );
    },
    getSecCodes() {
      let { selectBlock } = this;
      if (!selectBlock || !Array.isArray(selectBlock)) {
        return "";
      } else {
        return selectBlock.map((v) => v.key).toString();
      }
    },
    getEquCodes() {
      let { selectMixin } = this;
      if (!selectMixin || !Array.isArray(selectMixin)) {
        return "";
      } else {
        return selectMixin.map((v) => v.key).toString();
      }
    },
  },
  mounted() {},
  methods: {
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getChartData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //请求数据
    getChartData() {
      this.loading = true;
      this.getDateList();
      let {
        queryDimension,
        conditionsData: {
          block,
          mixin,
          structure,
          engineerName,
          placePart,
          strength,
        },
        defaultTime,
        dateType,
        chartsColors,
      } = this;
      (queryDimension == 0
        ? getCapacityStatisticsSec
        : getCapacityStatisticsEqu)({
        [queryDimension == 0 ? "secCodes" : "equCodes"]:
          queryDimension == 0 ? block : mixin,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
        ratioName: structure,
        dateType,
        projectName: engineerName,
        placePart,
        strengthGrade: strength,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.chartHeader = result.text || "未知";
          this.dataTime = result.subtext || "";

          let yMax = [];
          let maxArr = [];
          result.y2.map((v) => {
            maxArr.push(Math.max(...v));
          });
          yMax.push(Math.max(...maxArr));

          let maxArr3 = [];
          (result.y3 || []).map((v) => {
            if (v) {
              maxArr3.push(Math.max(...v));
            }
          });
          yMax.push(Math.max(...maxArr3));

          let maxArr4 = [];
          (result.y4 || []).map((v) => {
            if (v) {
              maxArr4.push(Math.max(...v));
            }
          });
          yMax.push(Math.max(...maxArr4));

          let ymax = Math.max(...yMax);
          ymax = Math.ceil(ymax) + 20;
          ymax = ymax >= 100 ? 100 : ymax;

          //柱状图数据
          let barArr = [];
          barArr = (result.y || []).map((v, i) => {
            return {
              data: Array.isArray(v) ? v : [],
              type: "bar",
              barMaxWidth: 40,
              name: result.legend[i] || "未知",
              color: chartsColors[i],
            };
          });
          //折线图数据
          let lineArr = [];
          lineArr = (result.y2 || []).map((v, i) => {
            let index = i + (result.y || []).length;
            return {
              data: Array.isArray(v) ? v : [],
              type: "line",
              name: result.legend[index] || "未知",
              yAxisIndex: 1,
              color: chartsColors[index],
            };
          });
          let lineArr3 = [];
          lineArr3 = (result.y3 || []).map((v, i) => {
            let index = i + (result.y || []).length + (result.y2 || []).length;
            return {
              data: Array.isArray(v) ? v : [],
              type: "line",
              name: result.legend[index] || "未知",
              yAxisIndex: 1,
              color: chartsColors[index],
            };
          });
          let lineArr4 = [];
          lineArr4 = (result.y4 || []).map((v, i) => {
            let index =
              i +
              (result.y || []).length +
              (result.y2 || []).length +
              (result.y3 || []).length;
            return {
              data: Array.isArray(v) ? v : [],
              type: "line",
              name: result.legend[index] || "未知",
              yAxisIndex: 1,
              color: chartsColors[index],
            };
          });
          this.echartOptions = {
            grid: {
              left: 80,
            },
            color: [
              themeStyles["--echart-blue"],
              themeStyles["--echart-orange"],
            ],
            legend: {
              icon: "",
              data: result.legend,
            },
            xAxis: {
              type: "category",
              data: result.x,
            },
            yAxis: [
              {},
              {
                name: "预警率",
                position: "right",
                max: ymax,
                min: 0,
                axisLabel: {
                  formatter: "{value} %",
                },
              },
            ],
            series: [...barArr, ...lineArr, ...lineArr3, ...lineArr4],
          };
        })
        .catch((_) => {
          this.echartOptions = {};
          this.loading = false;
          this.chartHeader = "未知";
          this.dataTime = "";
        });
    },

    //监听echarts渲染完成
    rendered() {
      this.loading = false;
    },

    //查询有数据的日期列表
    getDateList() {
      let {
        conditionsData: { block, mixin, structure },
      } = this;
      getHasDataDate({
        secCode: block,
        equCode: mixin,
        ratioName: structure,
      })
        .then((res) => {
          let { data } = res;
          this.activeDate = data.result || [];
        })
        .catch((_) => {
          this.activeDate = [];
        });
    },

    //数据类型切换
    checkDataType(type) {
      this.queryDimension = type;
      this.loading = true;
    },

    //监听时间范围切换
    changeTimeScope(e) {
      this.dateType = e.target.value;
      this.getChartData();
    },
  },
};
</script>

<style lang="less" scoped>
.capacity-statistical-container {
  padding: 0 0 0 10px;
  width: 100%;
  height: 100%;
  .flex();
  flex-direction: column;
  /deep/.conditions-container {
    .associativeSelectGroup-container {
      width: auto;
    }
    // .ant-btn {
    //   margin: 0 20px 10px 0;
    // }
    button,
    .ant-radio-group {
      margin-right: 16px;

      .ant-radio-button-wrapper {
        padding: 0 28px;
      }
    }
    .ant-radio-group {
      margin-bottom: 5px;
      .ant-radio-button-wrapper-checked {
        background: var(--primary-color);
        color: #fff;
      }
    }
    .ant-calendar-picker {
      margin-right: 0px !important;
    }
  }
  .card-view-container {
    flex: 1;
    position: relative;
    margin-top: 10px;
    .chart-header {
      font-size: 16px;
      height: 18px;
      padding-left: 10px;
      color: #525a5d;
      display: flex;
      align-items: center;
      > span {
        font-size: 14px;
        color: #999;
        margin-left: 10px;
      }
    }
    .date-time {
      font-size: 14px;
      color: #999;
      padding-top: 30px;
      padding-left: 12px;
    }
    .chart-body {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
}
</style>
